<!-- 首页 -->
<template>
	<view class="container">

		<view class="tabs">
			<view class="uni-tab-item-title uni-tab-item-title-active">通话记录</view>

			<view class="uni-tab-radio-group" v-if="isShowTaskType == 0">
				<radio-group @change="radioChange">
					<label class="radio" v-for="(item,index) in taskTypeData" :key="index+1"
						style="margin-right:30rpx;">
						<radio :value="item.value" :checked="index === currentTaskType" style="transform:scale(0.7)"
							:disabled="isAutoCall == 1 ? true : false" /> {{item.text}}
					</label>
				</radio-group>
			</view>
		</view>

		<view>
			<view class="call_search">
				<u-search placeholder="输入号码查询" v-model="keyword" placeholder-color="#909399"
					style="width:95%;float:left;margin-right:20rpx;margin-left:10rpx;margin-top:10rpx;margin-bottom:10rpx;height:90rpx;"
					:clearabled="true" :showActionText="false" @custom="$u.throttle(search(keyword), 2000)"
					@search="$u.throttle(search(keyword), 2000)"></u-search>
			</view>

			<view class="call_log_list" ref="call_log_list">
                <!-- <scroll-view scroll-y @scroll="handleScroll" :scroll-top="scrollTop"> -->
                    <view :class="currentDeleteIndex == item.id ? 'call_log_item_del':'call_log_item'"
                        :ref="'box_center_' + index" v-for="(item,index) in callList" :data-id="item.id" :data-index="index"
                        :key="index" :style="item.status == '3' ?'background-color:#e80f331c':''">

                        <!-- <liu-swipe-action :index="index" :btnList="[]" > -->

                        <view class="call_log_type">
                            <!-- 未呼通 -->
                            <i class="iconfont" v-if="item.status == '3'"
                                :style="item.status == '3' ? 'color:#ff0000;background-color:#e80f331c;':''"
                                @click="toggleActions(index)">&#xe96a;</i>
                            <!-- 呼通 -->
                            <i class="iconfont" v-else
                                :style="item.status != '3' ? 'color:green;background-color:#0fe82c1c;':''"
                                @click="toggleActions(index)">&#xe967;</i>
                        </view>
                        <view class="call_log_info">
                            <text class="phone_number" @click="handleCallPhone(item)">{{item.unum}}</text>
                            <view class="phone_time">时间：<text>{{item.stime}} - {{(item.etime == null || item.etime == "" || item.etime == undefined) ? "" : (item.etime.indexOf("/") == -1 ? item.etime.substring(10,20) : item.etime.substring(9,20))}}</text>
                            </view>
                        </view>

                        <view class="call_log_time" :style="item.record != '' ? '':'line-height: 120rpx;margin-top:1rpx;'">

                            <view class="call_log_detail">
                                <text class="text" @click.stop="handleViewInfo(item,index)">详情</text>
                            </view>

                            <view class="call_log_time_item" v-if="item.record" @click.stop="handlePlayVoice(item.record)">
                                <uni-icons type="sound" color="#72b6ff" size="28"></uni-icons></view>
                        </view>

                        <CallType :isShowCallType="item.showActions" :callData="item" @closeShowCallType="handleCloseShowCallType" callType="index" :callKey="index" />
                    </view>
                    
                <!-- </scroll-view> -->
            </view>

			<view style="width:100%;height:50rpx;float:left;clear:both;"></view>
		</view>

		<u-toast ref="uToast" />

		<!-- 播放录音 -->
		<view ref="playVoiceInfo" class="detail_pop" style="top:40%;" v-show="isShowPlayVoice == 1">
			<PlayVoice :voiceUrl="currentVoiceUrl" @closePlayVoicePop="handleClosePlayVoicePop" />
		</view>

		<!-- 显示订单详情 -->
		<CallOrder :isShowDetail="isShowDetail" :currentData="taskForm" @changeNumStatus="handleChangeNumStatus" @closeCallOrder="closeCallOrder" popType='cust' :styleData="'margin-top:-160rpx'" />

	</view>
</template>

<script>
	// 通话类型,1呼入,2呼出,3未呼通

	import {
		getVoiceBySeatIdList
	} from "@/api/voice.js";

	import {
		changeCallNumStatus
	} from "@/api/task.js";

	import {
		getTimeFormat
	} from "@/utils/data.js";

	import {
		isBlackByNumber
	} from "@/api/index.js";

	import AddInfo from "@/pages/index/addInfo.vue";
	import PlayVoice from "@/pages/index/playVoice.vue";

	import {
		mapGetters,
		mapState
	} from "vuex";

	import CallOrder from "../components/callOrder.vue";
	import CallType from "../components/callType.vue";

	let that;

	export default {
		data() {
			return {
				xPhone: 0,
				yPhone: 0,

				duration: 1,

				tabIndex: 1,
				popupVisible: false,

				callList: [],
				keyword: '',
				currentPhoneNumber: '',
				pageSize: 10, //一次取多少条
				currentPage: 1, //当前页数

				clientX: 0,

				currentDeleteIndex: 0,
				currentTaskType: 1, //0接收任务，1不接收


				taskTypeData: [{
					text: '接收',
					value: 0
				}, {
					text: '不接收',
					value: 1
				}],

				isShowTaskType: 0,

				currenInfoDetail: {}, //当前选择的需要添加号码的数据

				isShowPlayVoice: 0, //是否显示插入录音组件
				currentVoiceUrl: '', //当前录音文件路径，网络地址

				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000,

				start_time: '', //通话开始时间
				end_time: '', //通话结束时间
				currentPhoneNumber: '', //当前通话号码 
				currentData: {}, //当前选中的数据
				phonetype: 0, //通话类型
				isAutoCall: 0,

				isShowDetail: false,

				taskForm: {
					remark: '',
					phone_number: '',
					status: "",
					address: ''
				},
                
                scrollTop: 0,
                fixedPosition: '', // 'top-fixed' 或 'bottom-fixed'
                translateY: 0,
                elementHeight: 50, // 吸顶元素高度（需根据实际高度修改）
                bottomThreshold: 0 // 底部阈值
			};
		},
		props: ["currentkey"],
		components: {
			PlayVoice,
			CallOrder,
			CallType
		},
		computed: {
			...mapGetters(["userInfo", "callTaskTimer", "callType", "taskType", "callTaskCountTimer", "voiceServiceList",
				"autoCallStatus"
			]),
			...mapState({
				callType: state => state.task.callType,
				callTaskTimer: state => state.task.callTaskTimer,
				taskType: state => state.task.taskType,
				callTaskCountTimer: state => state.task.callTaskCountTimer,
				autoCallStatus: state => state.task.autoCallStatus
			})
		},
		created() {
			console.log("index created");

			that = this;

			const systemInfo = uni.getSystemInfoSync();
			this.xPhone = systemInfo.screenWidth - 70;
			this.yPhone = systemInfo.screenHeight - 120;

			this.currentTaskType = this.taskType;

			this.isAutoCall = this.autoCallStatus;

			console.log("index created ", this.isAutoCall);

			that.handleInitData();

			uni.$on("appendCallList", this.handleAppendCallList);
			uni.$on("updateCallList", this.handleUpdateCallList);
			uni.$on("updateTaskType", this.handleUpdateTaskType);

		},
        mounted() {
            //this.calculateThresholds();
        },          
		methods: {
            handleScroll(e) {
                const scrollTop = e.detail.scrollTop;
                const windowHeight = uni.getSystemInfoSync().windowHeight;
                const pageHeight = this.getScrollViewHeight(); // 需自行实现获取滚动区域高度
              
                // 判断是否滚动到底部
                const isAtBottom = scrollTop + windowHeight >= pageHeight - this.bottomThreshold;
              
                console.log("handlescroll",scrollTop,windowHeight,pageHeight,isAtBottom);
        
                if (isAtBottom) {
                    this.fixedPosition = 'bottom-fixed';
                    this.translateY = 0;
                } else if (scrollTop > this.elementHeight) {
                    this.fixedPosition = 'top-fixed';
                    this.translateY = 0;
                } else {
                    this.fixedPosition = '';
                    this.translateY = -scrollTop; // 跟随滚动
                }
            },
            
            calculateThresholds() {
                // 计算底部阈值（例如安全区域）
                const systemInfo = uni.getSystemInfoSync();
                this.bottomThreshold = systemInfo.screenHeight - systemInfo.windowHeight;
              
                console.log("bottomthreshold",this.bottomThreshold);
            },
            
            getScrollViewHeight() {
                // 实现获取滚动区域的实际高度
                return new Promise(resolve => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('.placeholder').boundingClientRect(data => {
                        resolve(data.height + 500); // 示例值，需替换为实际计算
                    }).exec();
                });
            },
                
            //关闭所有的快速外呼条
            handleCloseShowCallType(){
                console.log("handleCloseShowCallType ");
                that.callList.forEach((item, i) => {
                	item.showActions = false;
                });
                // 强制更新视图（解决动态对象属性更新问题）
                that.$forceUpdate();
            },
            
			// 切换操作按钮的显示状态
			toggleActions(index) {
				console.log("toggleactions ", index);
				this.callList.forEach((item, i) => {
					item.showActions = i === index ? !item.showActions : false;
				});
				// 强制更新视图（解决动态对象属性更新问题）
				this.$forceUpdate();
			},

			//列表点击事件，显示详情
			handleViewInfo(data, i) {
				this.taskForm = data;
				this.taskForm.type = this.current;

				this.taskForm.num = data.unum;

				this.isShowDetail = true;

				// uni.$emit("changePageStyle","hidden");
			},

			//修改号码状态
			handleChangeNumStatus(data) {
				//号码池
				let cust_list = this.callList;

				console.log("handleChangeNumStatus data", data);

				cust_list.map((item) => {
					if (item.num == data.num) {
						item.status = 1;
					}

					return item;
				})

				this.callList = cust_list;
				console.log("修改号码状态后的数据 callList", this.callList);
			},

			//关闭订单详情窗口
			closeCallOrder() {
				this.isShowDetail = false;

				this.taskForm = {};
			},

			//修改接收状态
			handleUpdateTaskType(val) {
				console.log("handleupdatetasktype val", val);
				this.isAutoCall = val;
			},

			//播放通话录音
			handlePlayVoice(voice_url) {
				console.log("voice_url", voice_url);
				this.isShowPlayVoice = 1;
				this.currentVoiceUrl = voice_url;
			},

			//子组件调用关闭播放通话录音窗口
			handleClosePlayVoicePop() {
				this.isShowPlayVoice = 0;
				this.currentVoiceUrl = '';
			},

			//子组件调用关闭窗口
			handleCloseInfoPop() {

				this.currenInfoDetail = {};
			},

			radioChange(evt) {
				for (let i = 0; i < this.taskTypeData.length; i++) {
					if (this.taskTypeData[i].value === evt.detail.value) {
						this.currentTaskType = evt.detail.value;

						console.log("radiochange ", evt);
						this.$console.info("切换接收状态 ", evt.detail, this.taskType);

						this.$store.dispatch("setTaskType", evt.detail.value);
						// uni.setStorageSync("taskType",evt.detail.value);

						//判断是否取消定时任务
						if (evt.detail.value == 1) {
							//取消任务
							//判断任务是否存在
							if (this.$globalData.taskTimer != null) {
								clearInterval(this.$globalData.taskTimer);
								this.$globalData.taskTimer = null;
							}
						} else {
							//启用任务
							// this.$emit("getCallCount","");
							// this.$emit("getCall","");

							if (this.$globalData.taskTimer == null) {
								this.$globalData.taskTimer = setInterval(() => {
									this.$globalData.taskTimerCount++;
									//console.log("index 开关 定时任务获取"+ this.$globalData.taskTimerCount);

									uni.$emit("handleGetCall", "");
								}, 2000);
							}
						}

						break;
					}
				}
			},

			handleLoadMore(type) {
				console.log("loadmore dddddddddd");

				let that = this;
				setTimeout(() => {
					if (type == 'start') {
						that.currentPage = 1;
						that.callList = [];
					}
					that.handleInitData();
					console.log("currentpage", that.currentPage);
				}, 500)
			},

			//追加数据到顶部			
			handleAppendCallList(e) {
				console.log("handleAppendCallList e", e);
				console.log("handleappendcalllist calllist", this.callList);

				e.stime = (e.stime == "" || e.stime == null || e.stime == undefined) ? (new Date().getTime()) : e.stime;
				e.atime = (e.atime == "" || e.atime == null || e.atime == undefined) ? (new Date().getTime()) : e.atime;
				e.etime = (e.etime == "" || e.etime == null || e.etime == undefined) ? (new Date().getTime()) : e.etime;

				e.stime = getTimeFormat(e.stime);
				e.atime = getTimeFormat(e.atime);
				e.etime = getTimeFormat(e.etime);

				e.ctime = e.stime;

				let new_call_list = [e];

				let res = new_call_list.concat(this.callList);

				console.log("handleappendcalllist res", res);

				this.callList = res;
			},

			//通过接口获取通话记录
			handleInitData() {
				uni.$emit('getLoadMoreState', "loading");

				let params = {
					'seat': this.userInfo.seat,
					'page': this.currentPage,
					'limit': this.pageSize,
					'keyword': this.keyword
				};

				console.log("handleinitdata params", params);

				getVoiceBySeatIdList(params).then(res => {
					console.log("getvoicebyseatidlist res", res);
					if (res.data.code == 200) {
						let {
							addList,
							changeList,
							removeList
						} = this.getDiffData(this.callList, res.data.data);

						console.log("handleinitdata");
						console.log(addList);
						console.log(changeList);
						console.log(removeList);

						if (addList.length > 0) {
							this.callList = this.callList.concat(addList);

							this.currentPage++;

							uni.$emit('getLoadMoreState', "more");
						} else {
							this.callList = res.data.data;
							uni.$emit('getLoadMoreState', "nomore");
						}
					} else {
						uni.$emit('getLoadMoreState', "nomore");
					}

					uni.stopPullDownRefresh();
				}).catch(error => {
					console.log("getvoicebyseatidlist err", error);

					uni.stopPullDownRefresh();
				})
			},

			getDiffData(oldList, newList) {
				const oldData = oldList.reduce((data, item) => {
					data[item.id] = item;
					return data;
				}, {});

				const addList = [];
				const changeList = [];

				for (const item of newList) {
					if (!oldData[item.id]) {
						addList.push(item);
					} else {
						if (oldData[item.id].start_time !== item.start_time) {
							changeList.push(item);
						}
						oldData[item.id] = true;
					}
				}

				const removeList = oldList.filter(item => oldData[item.id] !== true);

				return {
					addList,
					changeList,
					removeList,
				};
			},

			//呼起拨号盘
			handleCallPhone(data) {
				let _this = this;

				console.log("handlecallphone data", data);

				_this.currentData = data;

				_this.currentPhoneNumber = data.called;

				//调用接口
				let params = {
					'company_id': _this.userInfo.companyid,
					'caller': _this.userInfo.seat,
					'callee': data.unum,
					'seat': _this.userInfo.seat,
					'pid': data.pid,
					'tid': data.tid,
					'type': 3
				}

				//检测是否为黑名单
				isBlackByNumber({
					'cid': this.userInfo.companyid,
					'num': params.callee,
					'seat':this.userInfo.seat
				}).then(res => {
					console.log("infoself isblackbynumber res", res);

					// if(res.data.data.is_black >= 1){
					if (res.data.data.is_black >= 1 || res.data.data.is_black == '1' || res.data.data.is_black ==
						'2') {
						let title_str = (res.data.data.is_black == 1 || res.data.data.is_black == '1') ?
							'已开启黑名单过滤，该号码为第三方黑名单，禁止外呼！' : '已开启黑名单过滤，该号码为企业黑名单，禁止外呼！';
						this.$refs.uToast.show({
							title: title_str,
							type: 'error',
							duration: '1000',
						});
					} else {

						console.info("通话记录--外呼参数 ", params);
						_this.$console.info("通话记录--外呼参数 ", params);

						console.info("通话记录--先停止定时任务 ", params.callee);
						_this.$console.info("通话记录--先停止定时任务 ", params.callee);

						//先清除任务
						clearInterval(_this.$globalData.taskTimer);
						_this.$globalData.taskTimer = null;

						//获取录音目录
						plus.io.requestFileSystem(
							plus.io.PRIVATE_DOC, // 私有文档目录（对应 _doc 路径）
							(fs) => {
								// 定义目录路径（示例：在 _doc 下创建 myFolder）
								let dirPath = 'logs';

								// 检查并创建目录
								fs.root.getDirectory(
									dirPath, {
										create: true
									}, // 自动创建目录
									(entry) => {
										console.log('通话记录--创建文件夹成功:', entry.fullPath);
										_this.$console.info('通话记录--创建文件夹成功:', entry.fullPath);
										uni.setStorageSync("record_files", entry.fullPath);
									},
									function(e) {
										console.log('通话记录--创建文件夹失败:', e.message);
										_this.$console.info('通话记录--创建文件夹失败:', e.message);
									});
							},
							function(e) {
								console.log('通话记录--请求文件系统失败:', e.message);
								_this.$console.info('通话记录--请求文件系统失败:', e.message);
							});

						if (params.callee != '' && params.callee != null && params.callee != undefined) {
							//提前修改号码状态
							changeCallNumStatus(params).then(res => {
								//通话开始时间
								params.start_time = new Date().getTime();

								console.info("通话记录--接口修改号码状态 成功", params.callee, res);
								_this.$console.info("通话记录--接口修改号码状态 成功", params.callee, res);

								//记录日志
								console.info("通话记录--开始外呼 ", params.callee);
								_this.$console.info("通话记录--开始外呼 ", params.callee);

								//放入全局参数
								_this.$globalData.callData = params;

								//自动拨号
								plus.device.dial(params.callee, false);

								console.log('外呼，完成');
								_this.$console.info("通话记录--转到手机系统外呼 ", params);
							}).catch(err => {
								console.info("通话记录--接口修改号码状态 失败 err" + params.callee, err);
								_this.$console.info("通话记录--接口修改号码状态 失败 err " + params.callee, err);

								//开启任务定时器
								if (_this.currentTaskType == 0 && _this.$globalData.taskTimer == null) {
									_this.$globalData.taskTimer = setInterval(() => {
										uni.$emit("handleGetCall");
									}, 2000);
								}
							});
						} else {
							_this.$console.info("通话记录--号码为空 ", params);

							//开启任务定时器
							if (_this.currentTaskType == 0 && _this.$globalData.taskTimer == null) {
								_this.$globalData.taskTimer = setInterval(() => {
									uni.$emit("handleGetCall");
								}, 2000);
							}
						}
					}
				});
			},

			//呼起拨号盘
			onHandleOpenCallPhone(phone, is_add) {
				let navigate_url = "/pages/index/callPhone";

				console.log("currentData", phone);

				if (phone) {
					navigate_url += "?phone=" + phone + "&type=2";
				} else {
					navigate_url += "?phone=" + phone + "&type=1";
				}

				uni.navigateTo({
					url: navigate_url
				})

			},

			//搜索
			search(val) {
				this.keyword = val;
				this.callList = [];
				this.currentPage = 1;

				this.handleInitData();
			},

			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},

			//更新新数据
			handleUpdateCallList(data) {
				console.log("handleupdatecalllist", data);

				let call_list = this.callList;

				call_list.map((item, index) => {
					if (item.id == data.id) {
						item.record = data.voice_url;
					}

					return item;
				});

				this.callList = call_list;
			},
		},

		onLoad() {
			// this.openSQL();
			console.log("index onload");
		},
		onShow() {
			console.log("index onShow");
			// this.openSQL();

			this.currentTaskType = this.taskType;
		},
		onLaunch() {
			console.log("index onLaunch");
		},

		//下拉刷新
		onPullDownRefresh() {
			console.log("index onPullDownRefresh aaaaaaaaa");
		},
	};
</script>
<style lang="scss" scoped>
	page {
		width: 100%;


		background-color: #fff;
	}

	.detail_pop {
		width: 90%;
		margin-left: 5%;
		border: #ccc 1px solid;
		background-color: '#f7f7f7';
		box-shadow: 10rpx 10rpx 30rpx #ccc;
		border-radius: 20rpx;
		position: fixed;
		// top:300rpx;
		// bottom:300rpx;
		top: 20%;
		margin-bottom: 30%;
		z-index: 100000;
		overflow: hidden;
	}

	.container {
		width: 100%;
		color: #333333;
		background-image: linear-gradient(to bottom, #075AFF, #ffffff);
		background-size: 100% 45%;
		background-repeat: no-repeat;
		background-position: top center;
		overflow: hidden;
		height: auto;
		margin-bottom: 100rpx;
		background-color: #fff;
	}

	.call_search {
		width: 100%;
		height: 100rpx;
		padding-left: 30rpx;

		background-color: #fff;

		border-bottom: #ececec 1px solid;

		position: fixed;
		top: 170rpx;
		z-index: 1000
	}

	.call_log_list {
		width: 100%;
		// height:auto;
		margin-top: 270rpx;

		// overflow-y:auto;
		height: auto;
		// position: absolute;
		//       z-index:1000;
		margin-bottom: 225rpx;
		background-color: #fff;

		pointer-events: auto;
	}

	.call_log_item {
		width: 100%;
		height: 160rpx;
		float: left;
		border-bottom: #ececec 1px solid;
		background-color: #fff !important;

	}

	.call_log_item_del {
		width: 100%;
		height: 160rpx;
		float: left;
		border-bottom: #ececec 1px solid;
		background-color: #ff0000 !important;

		animation: mymove 1s 1;
	}

	@keyframes mymove {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0;
		}
	}

	.call_log_type {
		width: 100rpx;
		height: 158rpx;
		float: left;
	}

	.call_log_type .iconfont {
		font-size: 35rpx;
		display: block;
		width: 60rpx;
		height: 60rpx;
		margin-left: 20%;
		margin-top: 45rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
	}

	.call_log_info {
		width: calc(100% - 200rpx);
		float: left;
		height: 100%;
		margin-top: 20rpx;
	}

	.call_log_time {
		width: auto;
		margin-right: 10rpx;
		font-size: 25rpx;
		color: #009a4d;
		float: right;
		// line-height:138rpx;
		margin-top: 20rpx;
		right: 10rpx;
		position: absolute;
	}

	.call_log_time_item {
		float: right;
		margin-right: 15rpx;
	}

	.phone_number {
		width: 100%;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 70rpx;
	}

	.phone_time {
		color: #909090;
	}

	.tabs {
		background-color: #ffffff;

		width: 100%;
		height: 180rpx;
		top: 0rpx;
		// margin-left:20rpx;

		position: fixed;
		z-index: 1000;

	}

	.uni-tab-radio-group {
		float: right;
		margin-top: 90rpx;
		margin-right: 20rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 35rpx;
		line-height: 60rpx;
		flex-wrap: nowrap;
		margin-left: 20rpx;
		margin-top: 80rpx;

		float: left;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 3px #0b2eb0 solid;
	}

	.number_panel {
		background-color: #075AFF;
		border-radius: 60rpx;
		color: #fff;

		width: 120rpx;
		height: 120rpx;

		padding-top: 15rpx;

		text-align: center;

		text-shadow: 5rpx 5rpx 5rpx #7a7a7a;
		box-shadow: 15rpx 15rpx 18rpx #bfbfbf;
	}

	.number_panel .iconfont {
		font-size: 60rpx;
	}

	.number_panel .txt {
		display: block;
		clear: both;
		width: 100%;
		font-size: 25rpx;

	}

	.call_log_detail {
		width: 110rpx;
		float: right;
		line-height: 60rpx;
		height: 60rpx;
		margin-top: 10rpx;
	}

	.call_log_detail .text {
		line-height: 60rpx;
		color: #0e81a1;
		font-weight: bold;
		border: #ddf5ff 1px solid;
		padding: 15rpx 20rpx;
		background-color: #e7f8ff;
		border-radius: 15rpx;
	}


	.action-btn {
		padding: 10rpx;
		margin-left: 20rpx;
	}
</style>